<template>
  <div
      class="menu-item-sub"
      v-for="sub in menuSubList"
      :key="sub.category"
      @click="handleClick(sub.id)"
      :class="{active: activeId===sub.id}"
  >
    <el-icon :size="18" class="icon">
      <component :is="sub.icon" />
    </el-icon>
    <span class="text">{{ sub.name }}</span>
  </div>
</template>

<script setup>
import { Menu,VideoCamera, Picture, Document, Headset, MoreFilled } from '@element-plus/icons-vue';
import {defineEmits, ref} from 'vue';
import router from "@/router/index.js";

const emit = defineEmits(['menuSelected']);

const activeId = ref(1);
const handleClick = (id) => {
  activeId.value=id;
  emit('menuSelected', id);
  // 根据 id 找到对应的菜单项
  const selectedMenu = menuSubList.find(sub => sub.id === id);

  // 如果找到了对应的路径，则进行跳转
  if (selectedMenu) {
    router.push(selectedMenu.path);
  }
};

const menuSubList = [
  {
    id:1,
    icon: Menu,
    name: "全部",
    category: "all",
    path: "/framework/all"
  },
  {
    id:2,
    icon: VideoCamera,
    name: "视频",
    category: "video",
    path: "/framework/video"
  },
  {
    id:3,
    icon: Headset,
    name: "音频",
    category: "audio",
    path: "/framework/audio"
  },
  {
    id:4,
    icon: Picture,
    name: "图片",
    category: "image",
    path: "/framework/image"
  },
  {
    id:5,
    icon: Document,
    name: "文档",
    category: "document",
    path: "/framework/document"
  },
  {
    id:6,
    icon: MoreFilled,
    name: "其他",
    category: "other",
    path: "/framework/other"
  }
];
</script>

<style scoped lang="scss">
.menu-item-sub {
  display: flex;
  align-items: center;
  justify-content: center;  /* 水平居中 */
  text-align: center;
  line-height: 37px;
  padding: 8px 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
  &:hover {
    background: #f3f3f3;
  }
  .icon {
    font-size: 16px;
    margin-right: 20px; /* 减少图标和文字的间距 */
  }
  .text {
    font-size: 16px;
    font-weight: 400;
  }
}

.menu-item-sub.active {
  background: #F2FAFF;
  .icon {
    color: #06a7ff;
  }
  .text {
    color: #06a7ff;
  }
}

.tips {
  margin-top: 10px;
  color: #888888;
  font-size: 13px;
}
</style>
